<template>
    <div class="home-top">
        <h3>人气推荐</h3>
        <div class="content">
            <van-card
            v-for="item in goodsList"
            :key="item.id"
            :tag="item.tag"
            :price="item.retail_price"
            :origin-price="item.origin_price"
            :desc="item.goods_brief"
            :title="item.name"
            :thumb="item.list_pic_url">
        </van-card>
        </div>
    </div>
</template>

<script setup>
const goodsList = [
    {
        id:1,
        tag:'TOP1',
        retail_price:'299.00',
        goods_brief:'一级桑蚕丝，轻盈、透气、柔软',
        name:'桑蚕丝 正品桑蚕丝',
        list_pic_url:'/images/top1.jpg'
    },
    {
        id:2,
        tag:'TOP2',
        retail_price:'88.00',
        origin_price:'98.00',
        goods_brief:'安全，不会侧翻',
        name:'儿童摇摇马',
        list_pic_url:'/images/top2.jpg'
    },
    {
        id:3,
        tag:'TOP3',
        retail_price:'128.00',
        origin_price:'168.00',
        goods_brief:'轻松看书',
        name:'懒人沙发',
        list_pic_url:'/images/top3.jpg'
    },
    {
        id:4,
        tag:'TOP4',
        retail_price:'199.00',
        origin_price:'205.00',
        goods_brief:'大颗粒',
        name:'儿童积木',
        list_pic_url:'/images/top4.jpg'
    },
    {
        id:5,
        tag:'TOP5',
        retail_price:'89.00',
        origin_price:'99.00',
        goods_brief:'儿童扭扭车万向轮',
        name:'扭扭车',
        list_pic_url:'/images/top5.jpg'
    },
]
</script>

<style lang="less" scoped>
.home-top{
    h3{
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        margin: 0.5rem 0;
    }
    .content{
        --vant-tag-primary-color:#FF8000;
        --van-card-font-size:16px;
        --van-card-background:#f9f9f9;
        background: var(--van-card-background);
        :deep(.van-card){
            margin-top: 0;
            .van-card_title{
                padding: 10px 0 5px;
            }
            .van-card_price-currency{
                font-size:var(--van-card-font-size);
            }
        }
        &::after{
            content: '';
            display: block;
            height: 3rem;
        }
    }
}
</style>